import type { Component, Ref } from 'vue'

// 主题相关类型
export type Theme = 'light' | 'dark'

// 按钮组件类型
export interface ButtonProps {
  variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'link' | 'danger'
  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
  tag?: string
  disabled?: boolean
  loading?: boolean
  loadingText?: string
  iconLeft?: Component
  iconRight?: Component
  rounded?: boolean
  shadow?: boolean
  block?: boolean
}

// 卡片组件类型
export interface CardProps {
  title?: string
  subtitle?: string
  variant?: 'default' | 'outlined' | 'elevated' | 'filled' | 'ghost'
  size?: 'sm' | 'md' | 'lg'
  loading?: boolean
  disabled?: boolean
  hoverable?: boolean
  clickable?: boolean
  noPadding?: boolean
  divided?: boolean
}

// 导航菜单项类型
export interface NavMenuItem {
  key: string
  label: string
  to?: string
  icon?: Component
  children?: NavMenuItem[]
  external?: boolean
}

// 导航栏组件类型
export interface ModernNavProps {
  brandText?: string
  brandImage?: string
  brandTo?: string
  menuItems?: NavMenuItem[]
  variant?: 'default' | 'transparent' | 'bordered'
  fixed?: boolean
  blur?: boolean
}

// 表格列类型
export interface TableColumn {
  key: string
  label: string
  sortable?: boolean
  width?: string
  align?: 'left' | 'center' | 'right'
  fixed?: 'left' | 'right'
}

// 表格组件类型
export interface ModernTableProps {
  data?: any[]
  columns?: TableColumn[]
  loading?: boolean
  title?: string
  description?: string
  searchable?: boolean
  searchPlaceholder?: string
  searchFields?: string[]
  defaultSortKey?: string
  defaultSortOrder?: 'asc' | 'desc'
  pagination?: boolean
  pageSize?: number
  hoverable?: boolean
  striped?: boolean
  bordered?: boolean
  mobileCardView?: boolean
  emptyText?: string
  loadingText?: string
  rowKey?: string | ((row: any, index: number) => string)
  clickableRows?: boolean
}

// 加载动画组件类型
export interface LoadingSpinnerProps {
  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
  color?: 'primary' | 'secondary' | 'white' | 'gray'
  text?: string
  showText?: boolean
  ariaLabel?: string
}

// 主题配色类型
export interface ThemeColors {
  bg: {
    primary: string
    secondary: string
    surface: string
  }
  text: {
    primary: string
    secondary: string
    muted: string
  }
  border: {
    default: string
    light: string
  }
  status: {
    success: string
    warning: string
    error: string
    info: string
  }
}

// 响应式断点类型
export interface Breakpoints {
  sm: number
  md: number
  lg: number
  xl: number
  '2xl': number
}

export type BreakpointKey = keyof Breakpoints | 'xs'

// 组合式函数返回类型
export interface UseThemeReturn {
  currentTheme: Readonly<Ref<Theme>>
  systemTheme: Readonly<Ref<Theme>>
  isDark: Readonly<Ref<boolean>>
  isLight: Readonly<Ref<boolean>>
  themeIcon: Readonly<Ref<string>>
  themeLabel: Readonly<Ref<string>>
  toggleTheme: () => void
  setTheme: (theme: Theme) => void
  applyTheme: (theme: Theme) => void
}

export interface UseThemeColorsReturn {
  colors: Readonly<Ref<ThemeColors>>
  isDark: Readonly<Ref<boolean>>
}

export interface UseBreakpointsReturn {
  breakpoints: Breakpoints
  windowWidth: Readonly<Ref<number>>
  currentBreakpoint: Readonly<Ref<BreakpointKey>>
  isSmAndUp: Readonly<Ref<boolean>>
  isMdAndUp: Readonly<Ref<boolean>>
  isLgAndUp: Readonly<Ref<boolean>>
  isXlAndUp: Readonly<Ref<boolean>>
  is2xlAndUp: Readonly<Ref<boolean>>
  isMobile: Readonly<Ref<boolean>>
  isTablet: Readonly<Ref<boolean>>
  isDesktop: Readonly<Ref<boolean>>
}
